<template>
	<view class="page-setting padding-lr-sm">
		<form class="custom-form">
			<view class="avatar-box flex justify-center align-center">
				<image :src="ruleForm.avatar" class="cu-avatar round custom-avatar" @click="changeHeadIcon"/>
			</view>
			<view class="cu-form-group">
				<view class="title text-bold">昵称</view>
				<input placeholder="输入昵称" placeholder-class="text-sm" maxlength="9" v-model="ruleForm.nickname"></input>
				<view class="flex align-center">
					<view>{{ruleForm.nickname?ruleForm.nickname.length:0}}</view>
					<view>/</view>
					<view style="color:#E24E47;">9</view>
				</view>
			</view>
			<view class="flex flex-direction" style="position: relative;">
				<view class="title text-bold" style="font-size: 24rpx;">签名</view>
				<textarea placeholder="介绍自己" placeholder-class="text-sm" maxlength="80" v-model="ruleForm.about_me" class="textarea"/>
				<view class="flex align-center" style="position: absolute;right:10rpx;bottom:10rpx">
					<text>{{ruleForm.about_me?ruleForm.about_me.toString().length:0}}/</text>
					<text style="color:#E24E47;">80</text>
				</view>
				
			</view>

			<h-multi-tags title="性别" :list="sexList" labelKey="name" valueKey="value" :value.sync="ruleForm.sex" type="radio" />
			<h-multi-tags title="年龄" :list="ageList" labelKey="name" valueKey="value" :value.sync="ruleForm.age_type" type="radio" />
			<h-multi-tags title="喜欢的内容（多选）" :list.sync="likeList" labelKey="title"  :value.sync="ruleForm.like_sign"/>

		</form>
		<view class="custom-btn-submit flex justify-center">
			<button class="cu-btn round" @click="handleCommit">保存</button>
		</view>
	</view>
</template>

<script>
	import HMultiTags from "@/components/HMultiTags"
	export default {
		data() {
			return {
				sexList: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					}
				],
				ageList: [{
						name: '小于30岁',
						value: 1
					},
					{
						name: '30-45岁',
						value: 2
					},
					{
						name: '大于45岁',
						value: 3
					}
				],
				likeList: [],
				ruleForm: {
					nickname: "",
					about_me: "",
					sex: "",
					age_type: "", //0：小于30；1:30-45；2：大于45		 
					like_sign: "", //1 2 3
					avatar: ""
				},
				rules:{
					nickname:[
						{msg:"昵称不能为空",required:true}
					],
					about_me:[
						{msg:"简介不能为空",required:true}
					],
					sex:[
						{msg:"性别不能为空",required:true}
					],
					age_type:[
						{msg:"年龄段不能为空",required:true}
					],
					like_sign:[
						{msg:"喜欢的内容不能为空",required:true}
					],
					avatar:[
						{msg:"头像不能为空",required:true}
					]
				},
			}
		},
		components: {
			HMultiTags
		},
		methods: {
			async getPage() {
				let {
					data
				} = await this.waitingLoading(this.$h.api.userModel.getMyPage)()
				this.ruleForm = data
			},
			async getTagList() {
				let {
					data
				} = await this.$h.api.videoModel.getVideoTags()
				this.likeList=data.map(item=>(
					{
						...item,
						checked:this.ruleForm.like_sign?(this.ruleForm.like_sign.toString().split(',').includes(item.id.toString())?true:false):false
					}
				))
			},
			async changeHeadIcon() {
				this.headIcon=await this.$h.lib.chooseImage()
				let query={
					img_type:'avatar'
				}
				let {code,data}=await this.$h.uploadFile('image',this.headIcon,query)
				// console.log(code,data)
				if(code===1){
					this.$h.toast('上传成功',true).then(()=>{
						this.ruleForm.avatar=data.src
					})
				}else{
					this.$h.toast('上传失败')
				}
			},
			async handleCommit() {
				let res = await this.$h.utils.validateForm(this.ruleForm,this.rules)
				if(res){
					let query = {
						...this.ruleForm
					}
					let {code,data} = await this.waitingLoading(this.$h.api.userModel.postUserInfo)(query)
					if(code===1){
						let pages = getCurrentPages()
						let prevPage=""
						if (pages.length > 1) {
							prevPage = pages[pages.length - 2].route
						}
						this.$h.toast('修改成功',true).then(()=>{
							if(prevPage==='pages/login/login'){
								this.$h.router.switchTab({
									path:"/pages/home/home"
								})
							}else{
								this.$h.router.back()
							}
						})
					}
				}
			}
		},
		onLoad(){
			this.getPage().then(()=>{
				this.getTagList()
			})
			
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.page-setting {
		padding-bottom: 180rpx;
		overflow: hidden;

		.custom-form {
			.textarea{
				width:100%;padding:10rpx 10rpx 30rpx 10rpx;margin-top:10rpx;background-color: #EDEDED;
			}
			.avatar-box {
				padding: 80rpx 0 30rpx;

				.cu-avatar {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.cu-form-group {
				padding: 0;
				font-size: 24rpx;

				.title {
					font-size: 24rpx;
				}

				&.many-select {
					flex-direction: column;
					align-items: flex-start;
					padding: 68rpx 0;
				}

				.select-item {
					min-width: 120rpx;
					height: 50rpx;
					padding: 0 34rpx;
					border-radius: 25rpx;
					background-color: $bgColor;
					margin-right: 20rpx;
					font-size: 24rpx;
					color: #000;

					&.active {
						color: $mainColor;
					}

					&.active2 {
						background-color: $mainColor;
						color: #fff;
					}
				}
			}
		}

		.custom-btn-submit {
			width: 100%;
			padding: 60rpx 0;
			position: fixed;
			bottom: 0;

			.cu-btn {
				width: 340rpx;
				height: 80rpx;
				background-color: $mainColor;
				color: #fff;
			}
		}
	}
</style>
